<template>
<view>
	<view class="my-page-content">
		<view class="my-m-title">房源编号</view>
		<input  maxlength="50" class="my-select-class" type="text" v-model="formData.house_id"  placeholder="请输入您要搜索的房源编号"  />
		
		<view class="my-m-title">房源类型</view>
		<view  class="mb10 tag-list">
			<view
			   @click="selectedTag(item)"
			   :class="{'active-item ': item.checked}" 
			   v-for="(item, index) in houseTypeList" 
			   :key="index"
				class="tag-item">
				{{item.label}}
			</view>
		</view>
		
		<view class="my-m-title">可出租房间</view>
		<view  class="mb10 tag-list">
			<view
			   @click="selectedTag(item)"
			   :class="{'active-item ': item.checked}" 
			   v-for="(item, index) in roomList" 
			   :key="index"
				class="tag-item">
				{{item.label}}
			</view>
		</view>
		<view class="my-m-title">宜居人数</view>
		<view  class="mb10 tag-list">
			<view
			   @click="selectedPeople(index)"
			   :class="{'active-item ': currentIndex === index}" 
			   v-for="(item, index) in peopleList" 
			   :key="index"
				class="tag-item">
				{{item.label}}
			</view>
		</view>
		<view class="my-m-title">价格区间</view>
		<view  class="mb10  tag-price-list">
			<view class="flex-between mb15">
			     	<input @input="inputPrice($event, 0)" :value="price[0]" class="price-con uni-input"  type="number" placeholder="最低价格" />
				   <view> -</view>
					<input @input="inputPrice($event, 1)" :value="price[1]" class="price-con uni-input"  type="number" placeholder="最高价格" />
			</view>
			
			<view
			   @click="selectedPriceTag(item)"
			   :class="{'active-item ': item.checked}" 
			   v-for="(item, index) in priceList" 
			   :key="index"
				class="tag-price-item">
				{{item.label}}
			</view>
		</view>
		
		
	</view>
	<footBtn @nextStep="nextStep"  cancelBtnText="重 置"   @cancel="clearSearch"  btnText="确定提交" :type="2">
	</footBtn>
</view>
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import store from '../store/index.js'
	
	export default {
		components:{
			footBtn
		},
	    data() {
	        return {
				houseTypeList: [],
				roomList: [
					{
						label: '1室',
						value: 1,
						checked: false
					},
					{
						label: '2室',
						value: 2,
						checked: false
					},
					{
						label: '3室',
						value: 3,
						checked: false
					},
					{
						label: '4室及以上',
						value: 4,
						checked: false
					}
				],
				currentIndex: '',
				peopleList: [
					{
						label: '1人',
						value: 1,
					},
					{
						label: '2人',
						value: 2,
					},
					{
						label: '3人',
						value: 3,
					},
					{
						label: '4人及以上',
						value: 4,
					}
				],
				priceList: [
					{
						label: 'CAD$ 100/晚以下',
						value: [0, 100],
						checked: false
					},
					{
						label: 'CAD$ 100/晚-CAD$ 300/晚',
						value: [100, 300],
						checked: false
					},
					{
						label: 'CAD$ 300/晚-CAD$ 600/晚',
						value: [300,600],
						checked: false
					},
					{
						label: 'CAD$ 600/晚-CAD$ 1000/晚',
						value: [600, 1000],
						checked: false
					},
					{
						label: 'CAD$ 1000/晚-CAD$ 2000/晚',
						value: [1000, 2000],
						checked: false
					},
					{
						label: 'CAD$2000/晚以上', 
						value: [2000, ''],
						checked: false
					}
				],
				formData: {
					house_id: '',  //	否	number	房屋ID
					house_type: '',  //	否	array	房屋类型标签ID数组
					rooms: '',  //	否	array	可出租房间数组
					people_limit: '',  //	否	number	宜居人数
					price: [],  //	否	array	价格区间数组[ [0,100], [100,300] ],
				},
				price: [],
				pageData: {
					pageType: 1  //1 首页  2搜索页
				}
			}
		},
		onLoad(option) {
			this.pageData =  option;
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getHouseTypeList();
			},
			handData() {
				let searchData = store.state.searchData;
				Object.keys(this.formData).forEach(key=>{
					if(searchData[key]) {
						this.formData[key] = searchData[key];
					}
				})
				if(searchData.house_type){
					this.houseTypeList.map(item => {
						if(searchData.house_type.includes(item.value)) {
							item.checked = true;
						}
					 });
				}
				if(searchData.rooms){
					this.roomList.map(item => {
						if(searchData.rooms.includes(item.value)) {
							item.checked = true;
						}
					});
				}
				let flag = true;
				if(searchData.price && searchData.price.length > 0){
					let priceString = JSON.stringify(searchData.price);
					this.priceList.map(item => {
					  if(priceString.indexOf(JSON.stringify(item.value)) > -1) {
					   	item.checked = true;
						flag = false;
					  }
					});
					flag && (this.price = searchData.price[0]);
				}
				if(searchData.people_limit) {
					this.currentIndex = searchData.people_limit - 1;
				}
			},
			getHouseTypeList() {
				this.$http.getHouseType().then(res => {
						
					res.map(item =>{
						item.checked = false;
					})
				   this.houseTypeList  = res;
				   this.handData();
				})
			 },
			 selectedTag(item) {
				 item.checked = !item.checked;
			 },
			 selectedPriceTag(item) {
				 item.checked = !item.checked;
				 this.price = [];
			 },
			 inputPrice(e, index) {
			    this.priceList.map(item => {
				   item.checked = false;
				});
				
				this.price[index] = Number(e.target.value.replace(/[^0-9]/g, ''));
				
			 },
			 selectedPeople(index) {
				this.currentIndex = index;
				this.formData.people_limit = this.peopleList[index].value;
			 },
			 nextStep(){
				 if(this.price.length > 0) {
					 if(this.price[0] >this.price[1] ) {
						 this.$toast('最高价格须>=最低价格')
						 return;
					 }
				 	store.state.searchData.price  = [this.price];
				 }else {
				 	store.state.searchData.price  = this.priceList.filter(item => item.checked).map(item=> item.value);
				 }
				 store.state.searchData.house_type  = this.houseTypeList.filter(item => item.checked).map(item=> item.value);
				 store.state.searchData.rooms  = this.roomList.filter(item => item.checked).map(item=> item.value);
				  store.state.searchData.people_limit = this.formData.people_limit;
				  store.state.searchData.house_id = this.formData.house_id;
				
				 store.state.searchData.filter =  false;
				 if(store.state.searchData.price.length >0 || store.state.searchData.house_type.length >0 ||  store.state.searchData.rooms.length >0 || store.state.searchData.people_limit || store.state.searchData.house_id) {
				 	  store.state.searchData.filter =  true;
				 }
				 
				  if(this.pageData.pageType == 1) {
					  uni.navigateBack();
				  } else {
					
					 let urlString = this.$webViewBaseUrl +'/searchHouse.html?searchData=' + JSON.stringify(store.state.searchData);
					 let data = {
						 src: urlString,
						 backUrl: '/pages/index/index'
					 }
					 this.$setStorage('webViewData', data)
					 this.$goPage(2, `/pages/webView/index?url=${urlString}`);
				  }
			 },
			 clearSearch(){
				 this.houseTypeList.map(item => {
				    item.checked = false;
				 });
				 this.roomList.map(item => {
				    item.checked = false;
				 });
				this.priceList.map(item => {
				   item.checked = false;
				});
				
				this.formData.people_limit = '';
				this.currentIndex = '';
				this.price = [];
				this.formData.house_id  = '';
				
				
				
				
			 },
		}
		
	}
</script>

<style lang="scss" scoped>
		
	.tag-item {
		width: 211rpx;
		box-sizing: border-box;
		text-align: center;
		margin-right: 20rpx;
		 &:nth-child(3n +3) {
			margin-right: 0!important;
			
		}
	}
	.tag-price-item {
		width: 324rpx;
		height: 59rpx;
		background: #EFEFEF;
		border-radius: 4rpx; 
		box-sizing: border-box;
		text-align: center;
		font-size: 22rpx;
		color: #222222;
		line-height: 59rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		display: inline-block;
		 &:nth-child(2n + 1) {
			margin-right: 0!important;
			
		}
	}
	.price-con {
		width: 256rpx;
		height: 59rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #BDBDBD;
		font-size: 27rpx;
		color: #9A9A9A;
		line-height: 59rpx;
		text-align: center;
	}
</style>